import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { StarIcon, ShoppingCartIcon, HeartIcon, ChevronRightIcon, CheckIcon, AlertCircleIcon } from 'lucide-react';
export const ProductDetailPage = () => {
  const {
    id
  } = useParams();
  const [selectedImage, setSelectedImage] = useState(0);
  const [selectedSize, setSelectedSize] = useState('');
  const [quantity, setQuantity] = useState(1);
  const [showReviews, setShowReviews] = useState(false);
  // In a real application, you would fetch product data based on the ID
  // This is mock data for demonstration purposes
  const product = {
    id: id,
    name: 'Ergonomic Baby Carrier',
    description: 'Designed for optimal comfort for both parent and baby. Suitable from newborn to toddler with adjustable settings for perfect fit at every stage.',
    price: 89.99,
    discountPrice: 79.99,
    rating: 4.8,
    reviewCount: 312,
    stock: 15,
    brand: 'CubComfort',
    category: 'Carriers & Slings',
    ageGroup: '0-36 months',
    images: ['https://images.unsplash.com/photo-1581952976147-5a2d15560349?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1607972786221-6d22a7ee3ca2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80', 'https://images.unsplash.com/photo-1594829978705-aa0a97f5a0dc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'],
    colors: ['Gray', 'Black', 'Beige'],
    sizes: ['One Size'],
    features: ["Ergonomic design supports baby's natural sitting position", 'Adjustable head and neck support for newborns', 'Breathable mesh fabric keeps baby cool', 'Machine washable for easy cleaning', 'Padded shoulder straps and lumbar support for parent comfort', 'Multiple carrying positions: front inward, front outward, hip, and back'],
    safetyInfo: ['Tested to meet or exceed all safety standards', 'Suitable for babies 7-45 lbs (3.2-20 kg)', "Always ensure baby's face is visible and airways are clear", 'Check all buckles and straps before each use'],
    expertReview: "Recommended by pediatricians for proper hip development. The ergonomic design distributes weight evenly, reducing strain on parents' backs and shoulders.",
    reviews: [{
      id: 'r1',
      user: 'Sarah M.',
      rating: 5,
      date: 'May 12, 2023',
      title: "Best carrier we've tried!",
      comment: "After trying 3 different carriers, this is by far the most comfortable for both me and my baby. My back doesn't hurt even after hours of wear, and my 6-month-old falls asleep within minutes.",
      helpful: 42
    }, {
      id: 'r2',
      user: 'Michael T.',
      rating: 4,
      date: 'April 3, 2023',
      title: 'Great quality, slight learning curve',
      comment: "The quality is excellent and once you figure out all the straps and adjustments, it's very comfortable. Took a star off because the instructions could be clearer, but the YouTube tutorials helped.",
      helpful: 28
    }, {
      id: 'r3',
      user: 'Jessica L.',
      rating: 5,
      date: 'March 22, 2023',
      title: 'Worth every penny',
      comment: "I was hesitant about spending this much on a carrier, but it's been one of our best baby purchases. The support is amazing, and I love all the different carrying positions as our baby grows.",
      helpful: 35
    }],
    relatedProducts: [{
      id: 'rp1',
      name: 'Nursing Cover',
      image: 'https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      price: 24.99
    }, {
      id: 'rp2',
      name: 'Baby Wrap Carrier',
      image: 'https://images.unsplash.com/photo-1590004987763-0a9a4cb5e5c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      price: 49.99
    }, {
      id: 'rp3',
      name: 'Baby Carrier Storage Pouch',
      image: 'https://images.unsplash.com/photo-1596240898484-250d47f8e9d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      price: 14.99
    }, {
      id: 'rp4',
      name: 'Teething Pads',
      image: 'https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
      price: 12.99
    }]
  };
  const decreaseQuantity = () => {
    if (quantity > 1) {
      setQuantity(quantity - 1);
    }
  };
  const increaseQuantity = () => {
    if (quantity < product.stock) {
      setQuantity(quantity + 1);
    }
  };
  return <div className="w-full bg-cream">
      <div className="container mx-auto px-4 md:px-6 py-8">
        {/* Breadcrumbs */}
        <nav className="flex text-sm mb-6">
          <ol className="flex items-center space-x-2">
            <li>
              <a href="/" className="text-gray-500 hover:text-terracotta">
                Home
              </a>
            </li>
            <li className="text-gray-500">/</li>
            <li>
              <a href="/newborn" className="text-gray-500 hover:text-terracotta">
                Newborn
              </a>
            </li>
            <li className="text-gray-500">/</li>
            <li className="text-dark font-medium">{product.name}</li>
          </ol>
        </nav>
        {/* Product Detail Main Section */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
          {/* Product Images */}
          <div className="space-y-4">
            <div className="aspect-square overflow-hidden rounded-lg bg-white">
              <img src={product.images[selectedImage]} alt={product.name} className="w-full h-full object-cover" />
            </div>
            <div className="flex space-x-4">
              {product.images.map((image, index) => <button key={index} className={`aspect-square w-20 rounded-md overflow-hidden border-2 ${index === selectedImage ? 'border-terracotta' : 'border-transparent'}`} onClick={() => setSelectedImage(index)}>
                  <img src={image} alt={`${product.name} view ${index + 1}`} className="w-full h-full object-cover" />
                </button>)}
            </div>
          </div>
          {/* Product Info */}
          <div>
            <div className="mb-6">
              <h1 className="font-nunito font-bold text-3xl text-dark mb-2">
                {product.name}
              </h1>
              <div className="flex items-center mb-3">
                <div className="flex text-yellow mr-2">
                  {[...Array(5)].map((_, i) => <StarIcon key={i} size={18} className={`${i < Math.floor(product.rating) ? 'fill-yellow text-yellow' : 'fill-gray-200 text-gray-200'}`} />)}
                </div>
                <span className="text-sm font-medium">{product.rating}</span>
                <span className="mx-2 text-gray-400">•</span>
                <a href="#reviews" className="text-sm text-gray-500 hover:text-terracotta" onClick={() => setShowReviews(true)}>
                  {product.reviewCount} reviews
                </a>
              </div>
              <div className="flex items-baseline mb-4">
                {product.discountPrice ? <>
                    <span className="text-2xl font-bold text-terracotta mr-2">
                      ${product.discountPrice}
                    </span>
                    <span className="text-lg text-gray-500 line-through">
                      ${product.price}
                    </span>
                    <span className="ml-2 px-2 py-1 bg-yellow/20 text-yellow-800 text-xs font-medium rounded">
                      Save ${(product.price - product.discountPrice).toFixed(2)}
                    </span>
                  </> : <span className="text-2xl font-bold text-terracotta">
                    ${product.price}
                  </span>}
              </div>
              <p className="text-gray-600 mb-6">{product.description}</p>
              {/* Product Details */}
              <div className="space-y-4 mb-6">
                <div className="flex items-center">
                  <span className="w-28 text-gray-500">Brand:</span>
                  <span>{product.brand}</span>
                </div>
                <div className="flex items-center">
                  <span className="w-28 text-gray-500">Category:</span>
                  <span>{product.category}</span>
                </div>
                <div className="flex items-center">
                  <span className="w-28 text-gray-500">Age Group:</span>
                  <span>{product.ageGroup}</span>
                </div>
                <div className="flex items-center">
                  <span className="w-28 text-gray-500">Availability:</span>
                  <span className={product.stock > 0 ? 'text-green-600' : 'text-red-600'}>
                    {product.stock > 0 ? `In Stock (${product.stock} left)` : 'Out of Stock'}
                  </span>
                </div>
              </div>
              {/* Color Selection */}
              {product.colors.length > 0 && <div className="mb-6">
                  <h3 className="font-medium mb-2">Color</h3>
                  <div className="flex space-x-3">
                    {product.colors.map((color, index) => <button key={index} className="px-3 py-1 border rounded-md hover:border-terracotta">
                        {color}
                      </button>)}
                  </div>
                </div>}
              {/* Size Selection */}
              {product.sizes.length > 0 && <div className="mb-6">
                  <h3 className="font-medium mb-2">Size</h3>
                  <div className="flex space-x-3">
                    {product.sizes.map((size, index) => <button key={index} className={`px-3 py-1 border rounded-md ${selectedSize === size ? 'border-terracotta bg-terracotta/10' : 'hover:border-terracotta'}`} onClick={() => setSelectedSize(size)}>
                        {size}
                      </button>)}
                  </div>
                </div>}
              {/* Quantity Selector */}
              <div className="mb-6">
                <h3 className="font-medium mb-2">Quantity</h3>
                <div className="flex items-center">
                  <button onClick={decreaseQuantity} className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded-l-md" disabled={quantity <= 1}>
                    -
                  </button>
                  <input type="number" value={quantity} onChange={e => {
                  const val = parseInt(e.target.value);
                  if (!isNaN(val) && val >= 1 && val <= product.stock) {
                    setQuantity(val);
                  }
                }} className="w-12 h-8 text-center border-t border-b border-gray-300" />
                  <button onClick={increaseQuantity} className="w-8 h-8 flex items-center justify-center border border-gray-300 rounded-r-md" disabled={quantity >= product.stock}>
                    +
                  </button>
                </div>
              </div>
              {/* Action Buttons */}
              <div className="flex flex-col sm:flex-row gap-3 mb-6">
                <button className="flex-1 bg-terracotta text-white px-6 py-3 rounded-md hover:bg-terracotta/90 transition-colors flex items-center justify-center font-medium">
                  <ShoppingCartIcon size={18} className="mr-2" />
                  Add to Cart
                </button>
                <button className="flex-1 bg-white text-dark border border-gray-300 px-6 py-3 rounded-md hover:bg-gray-50 transition-colors flex items-center justify-center font-medium">
                  <HeartIcon size={18} className="mr-2" />
                  Add to Wishlist
                </button>
              </div>
              {/* Safety Notice */}
              <div className="bg-yellow/10 border border-yellow/30 rounded-md p-4 flex items-start">
                <AlertCircleIcon size={20} className="text-yellow mr-3 mt-0.5 shrink-0" />
                <p className="text-sm text-yellow-800">
                  <span className="font-medium">Safety First:</span> Always
                  follow manufacturer instructions and safety guidelines when
                  using baby products.
                </p>
              </div>
            </div>
          </div>
        </div>
        {/* Product Features and Details */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
          <div className="lg:col-span-2">
            <h2 className="font-nunito font-semibold text-2xl text-dark mb-6">
              Features & Benefits
            </h2>
            <ul className="space-y-3 mb-8">
              {product.features.map((feature, index) => <li key={index} className="flex items-start">
                  <CheckIcon size={18} className="text-terracotta mr-2 mt-1 shrink-0" />
                  <span>{feature}</span>
                </li>)}
            </ul>
            <h2 className="font-nunito font-semibold text-2xl text-dark mb-6">
              Safety Information
            </h2>
            <ul className="space-y-3 mb-8">
              {product.safetyInfo.map((info, index) => <li key={index} className="flex items-start">
                  <AlertCircleIcon size={18} className="text-yellow mr-2 mt-1 shrink-0" />
                  <span>{info}</span>
                </li>)}
            </ul>
          </div>
          <div className="bg-white p-6 rounded-lg shadow-sm h-fit">
            <div className="flex items-center mb-4">
              <StarIcon size={22} className="text-yellow fill-yellow mr-2" />
              <h3 className="font-nunito font-semibold text-lg">
                Expert Review
              </h3>
            </div>
            <p className="text-gray-600 mb-6">{product.expertReview}</p>
            <div className="border-t border-gray-100 pt-4">
              <h4 className="font-medium mb-2">Why We Recommend It</h4>
              <p className="text-sm text-gray-600">
                This product has been thoroughly tested by our team of experts
                and meets our high standards for quality, safety, and value.
              </p>
            </div>
          </div>
        </div>
        {/* Customer Reviews */}
        <div id="reviews" className="mb-16">
          <div className="flex justify-between items-center mb-6">
            <h2 className="font-nunito font-semibold text-2xl text-dark">
              Customer Reviews
            </h2>
            <button className="text-terracotta hover:text-terracotta/80 font-medium" onClick={() => setShowReviews(!showReviews)}>
              {showReviews ? 'Hide Reviews' : 'Show All Reviews'}
            </button>
          </div>
          {showReviews ? <div className="space-y-6">
              {product.reviews.map(review => <div key={review.id} className="bg-white p-6 rounded-lg shadow-sm">
                  <div className="flex justify-between mb-2">
                    <h3 className="font-medium text-lg">{review.title}</h3>
                    <div className="flex text-yellow">
                      {[...Array(5)].map((_, i) => <StarIcon key={i} size={16} className={`${i < review.rating ? 'fill-yellow text-yellow' : 'fill-gray-200 text-gray-200'}`} />)}
                    </div>
                  </div>
                  <div className="flex items-center text-sm text-gray-500 mb-3">
                    <span>{review.user}</span>
                    <span className="mx-2">•</span>
                    <span>{review.date}</span>
                  </div>
                  <p className="text-gray-600 mb-3">{review.comment}</p>
                  <div className="flex items-center text-sm">
                    <button className="text-gray-500 hover:text-terracotta flex items-center">
                      <span>{review.helpful} people found this helpful</span>
                    </button>
                  </div>
                </div>)}
              <div className="text-center">
                <button className="bg-white text-dark border border-gray-300 px-6 py-2 rounded-md hover:bg-gray-50 transition-colors font-medium">
                  Write a Review
                </button>
              </div>
            </div> : <div className="bg-white p-6 rounded-lg shadow-sm">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center">
                  <div className="flex text-yellow mr-2">
                    {[...Array(5)].map((_, i) => <StarIcon key={i} size={18} className={`${i < Math.floor(product.rating) ? 'fill-yellow text-yellow' : 'fill-gray-200 text-gray-200'}`} />)}
                  </div>
                  <span className="font-medium">{product.rating} out of 5</span>
                </div>
                <span className="text-gray-500">
                  {product.reviewCount} global ratings
                </span>
              </div>
              <div className="space-y-2 mb-6">
                <div className="flex items-center">
                  <span className="text-sm w-8">5★</span>
                  <div className="flex-1 h-2 bg-gray-200 rounded-full mx-2">
                    <div className="h-2 bg-yellow rounded-full" style={{
                  width: '70%'
                }}></div>
                  </div>
                  <span className="text-sm w-8 text-right">70%</span>
                </div>
                <div className="flex items-center">
                  <span className="text-sm w-8">4★</span>
                  <div className="flex-1 h-2 bg-gray-200 rounded-full mx-2">
                    <div className="h-2 bg-yellow rounded-full" style={{
                  width: '20%'
                }}></div>
                  </div>
                  <span className="text-sm w-8 text-right">20%</span>
                </div>
                <div className="flex items-center">
                  <span className="text-sm w-8">3★</span>
                  <div className="flex-1 h-2 bg-gray-200 rounded-full mx-2">
                    <div className="h-2 bg-yellow rounded-full" style={{
                  width: '7%'
                }}></div>
                  </div>
                  <span className="text-sm w-8 text-right">7%</span>
                </div>
                <div className="flex items-center">
                  <span className="text-sm w-8">2★</span>
                  <div className="flex-1 h-2 bg-gray-200 rounded-full mx-2">
                    <div className="h-2 bg-yellow rounded-full" style={{
                  width: '2%'
                }}></div>
                  </div>
                  <span className="text-sm w-8 text-right">2%</span>
                </div>
                <div className="flex items-center">
                  <span className="text-sm w-8">1★</span>
                  <div className="flex-1 h-2 bg-gray-200 rounded-full mx-2">
                    <div className="h-2 bg-yellow rounded-full" style={{
                  width: '1%'
                }}></div>
                  </div>
                  <span className="text-sm w-8 text-right">1%</span>
                </div>
              </div>
              <div className="flex justify-center">
                <button className="text-terracotta hover:text-terracotta/80 font-medium" onClick={() => setShowReviews(true)}>
                  See all reviews
                </button>
              </div>
            </div>}
        </div>
        {/* Related Products */}
        <div>
          <div className="flex justify-between items-center mb-6">
            <h2 className="font-nunito font-semibold text-2xl text-dark">
              You May Also Like
            </h2>
            <a href="#" className="text-terracotta hover:text-terracotta/80 flex items-center text-sm font-medium">
              View more
              <ChevronRightIcon size={16} className="ml-1" />
            </a>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {product.relatedProducts.map(item => <a key={item.id} href={`/product/${item.id}`} className="group block rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-white">
                <div className="aspect-square w-full">
                  <img src={item.image} alt={item.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
                </div>
                <div className="p-4">
                  <h3 className="font-nunito font-semibold text-lg mb-2">
                    {item.name}
                  </h3>
                  <p className="font-medium text-terracotta">${item.price}</p>
                </div>
              </a>)}
          </div>
        </div>
      </div>
    </div>;
};